<template>
  <div>
    <div class="coupon-list-window" :class="coupon.coupon === true ? 'on' : ''">
      <div class="title">
        优惠<span class="iconfont icon-guanbi" @click="close"></span>
      </div>
      <div class="coupon-list" v-if="coupon.list.length > 0">
        <div
          class="item acea-row bg2"
          :class="{
            bg1: item.type == 1
          }"
          v-for="(item, index) in coupon.list"
          :key="index"
        >
          <div class="money" :class="!item.is_use ? '' : 'moneyGray'">
            <div>
              ￥<span class="num">{{ item.coupon_price }}</span>
            </div>
            <div class="pic-num">满{{ item.use_min_price }}元可用</div>
            <div class="pic-num">{{ formatDec(item.dec) }}</div>
            <div
              class="dec_info"
              v-if="item.dec.length > 7"
              @click="item.showInfo = !item.showInfo"
            >
              详细信息
            </div>
            <CouponDecWindow :decInfo="item.showInfo" :detail="item.dec" />
          </div>
          <div class="text">
            <div class="condition ">
              <span class="line-title">{{ item.title }}</span>
            </div>
            <div class="coupon_time">
              <span v-if="item.time_type == 1">{{ item.time }}</span>
              <span v-else>领取后{{ item.time }}天有效</span>
            </div>
            <div class="data acea-row row-between-wrapper">
              <div v-if="item.limit_type == 1">
                <div class="btn" @click="getCouponUser(index, item.id)">
                  领取
                </div>
              </div>
              <div v-else>
                <div
                  class="btn"
                  v-show="item.status == 0"
                  @click="getCouponUser(index, item.id)"
                >
                  领取
                </div>
                <div class="btn used" v-show="item.status != 0">已领取</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--无优惠券-->
      <div class="pictrue" v-else>
        <img src="@assets/images/noCoupon.png" class="image" />
      </div>
    </div>
    <div
      class="mask"
      @touchmove.prevent
      :hidden="coupon.coupon === false"
      @click="close"
    ></div>
  </div>
</template>
<script>
import { getCouponReceive } from "@api/user";
import CouponDecWindow from "@components/couponDecWindow";
export default {
  name: "CouponPop",
  props: {
    coupon: {
      type: Object,
      default: () => {}
    }
  },
  data: function() {
    return {};
  },
  components: { CouponDecWindow },
  mounted: function() {},
  methods: {
    formatDec(text) {
      return text.length > 7 ? `${text.slice(0, 7)}...使用` : text;
    },
    close: function() {
      this.$emit("changeFun", { action: "changecoupon", value: false }); //$emit():注册事件；
    },
    getCouponUser: function(index, id) {
      let that = this,
        list = that.coupon.list;
      getCouponReceive(id)
        .then(() => {
          that.$dialog.toast({ mes: "领取成功" });
          that.$set(list[index], "is_use", true);
          that.$emit("changefun", { action: "currentcoupon", value: index });
          that.$emit("changeFun", { action: "changecoupon", value: false });
        })
        .catch(function(res) {
          that.$dialog.toast({ mes: res.msg });
        });
    }
  }
};
</script>
<style scoped>
.coupon-list .item .text .data .btn {
  width: auto;
  padding: 0.1rem 0.34rem;
  border-radius: 0.32rem;
  font-size: 0.28rem;
  background-color: #ff3c39;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
}
.coupon-list .item .text .data .btn.used {
  border: 1px solid #ff3c39;
  background-color: #fff;
  color: #ff3c39;
}
</style>
